<template>
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>注册</p>
            <div></div>
        </header>
        <div class="top-ban"></div>
        <h1>欢迎注册</h1>
        <table>
            <tbody>
                <tr>
                    <td>手机号码</td>
                    <td><input type="text" placeholder="请输入手机号码" v-model="form.userid" /></td>
                </tr>
                <tr>
                    <td>真实姓名</td>
                    <td><input type="text" placeholder="真实姓名便于查看体检报告" v-model="form.realname" /></td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td><input type="date" v-model="form.birthday" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" v-model="form.sex" checked value="0">男</input> 
                        <input type="radio" v-model="form.sex" value="1">女</input>
                    </td>
                </tr>
                <tr>
                    <td>身份证号</td>
                    <td><input type="text" placeholder="请输入身份证号" v-model="form.identitycard" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" placeholder="请输入密码" v-model="password" /></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" placeholder="请再次输入密码" v-model="confirmPassword" /></td>
                </tr>
            </tbody>
        </table>
        <button @click="register" class="btn">完成</button>
        <text v-if="noshow" >{{text}}</text>
    </div>
</template>


<script setup>
import "../../style/css/register.css";
import { useRouter} from "vue-router";
import {reactive, ref,computed,onMounted} from "vue";
import axios from "axios";


const router = useRouter();
let form = reactive({
    userid:'',
    realname:'',
    birthday: "",
    sex: 0,
    identitycard:'',
    password: ''
});
var noshow=ref(false)
var password = ref("");
var confirmPassword = ref("");
var text = ref("");
var userList = ref([]);

onMounted(async () => {
    
    await axios.get("/api/user/getAll").then((res) => {
        userList.value = res.data.data;
        // console.log(userList.value.includes())
        console.log(res)
    });
});

// 正则验证
var phone_pattern = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

var idcard_pattern = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/  
// 函数
const show=()=> {
    noshow.value=true;
    setTimeout(() => {
        noshow.value=false;
    }, 2000);
}

const isempty = computed(() => {
    return !form.userid || !form.realname || !form.birthday || !form.identitycard || !password.value || !confirmPassword.value;
});
const register = async() => {
    if(isempty.value) {
        text.value='请填写完整的注册信息'
        show()
    }else 
    {   
        // 正则验证手机号码
        if (!phone_pattern.test(form.userid)) {
            text.value='请输入正确的手机号码'
            show()
        }else if (!idcard_pattern.test(form.identitycard)) {
            text.value='请输入正确的身份证号'
            show()
        }else if(userList.value.some(user => user.userid === form.userid))
        {
            text.value='该手机号码已注册'
            show()
        }else{
            
            if (password.value == confirmPassword.value) {  
                form.password = password.value
                axios.put("/api/register", form).then((res) => {
                    // 注册成功，跳转到登录页
                    if (res.data.status == 200) {
                    router.push("/login");
                }
            
            });
            } else {
                text.value='两次密码输入不一致'
                show()
                password.value = "";
                confirmPassword.value = "";
            }
        }
    }
    
   

};
</script>
